<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- div.form>p*4>label{用户名:}+input+span.user_span -->

    <!-- div.form#one{123123}*10    10个li  .form  #one -->
    <!-- div.form#one${123123_$$}*10                     -->

    <!-- >    +  -->
    <!-- <div><span></span><i></i></div> -->


    <div class="form">
        <p><label for="">用户名:</label><input type="text" class="user"><span class="user_span"></span></p>
        <p><label for="">密&emsp;码:</label><input type="text" class="pwd"><span class="pwd_span"></span></p>
        <p><label for="">手机号:</label><input type="text" class="phone"><span class="phone_span"></span></p>
        <p><label for="">邮&emsp;箱:</label><input type="text" class="email"><span class="email_span"></span></p>
        <p><input type="submit" class="subBtn" value="注册"><input type="reset" value="重置"></p>
    </div>


</body>

<script>
    // 用户名 密码 手机号 邮箱 全都符合验证条件(规则) 才可以注册

    var userInp = document.querySelector(".user");


    var userFlag = false;

    userInp.onblur = function () {
        var user = this.value.trim();
        userFlag = false;

        var reg = /^[a-zA-Z_]\w{5,11}$/;
        if (reg.test(user)) {
            userFlag = true;
        } else {

        }
    }

    subBtn.onclick = function () {
        if (userFlag && pwdFlag && phoneFlag && emailFlag) {
            // 注册   
            // 使用cookie模拟注册    存储数据cookie(user,pwd ,phone,email)
            // 

        }
    }




</script>

</html>